<template>
  <div
    role="tooltip"
    class="van_popover van_popper van_popper_manga"
    x-placement="bottom-start"
    style="
      transform-origin: center top;
      z-index: 2023;
      position: absolute;
      top: 44px;
    "
  >
    <div class="box border_box">
      <div class="recommendation_list border_box">
        <a
          :href="`//manga.bilibili.com/detail/${item.mid}?refer_from=bili_main_nav`"
          target="_blank"
          :title="item.title"
          class="list_item p_relative"
          v-for="item in recommendList"
          :key="item.mid"
        >
          <div class="p_relative">
            <div class="item_image bg_cover bg_center bg_no_repeat over_hidden">
              <div
                class="w_100 h_100 bg_cover bg_center bg_no_repeat"
                :style="{ backgroundImage: `url(${item.poster})` }"
                v-if="item.poster"
              ></div>
            </div>
            <div class="item_title t_over_hidden t_no_wrap">
              {{ item.title }}
            </div>
          </div>
        </a>
      </div>
      <div class="divider h_100"></div>
      <div class="popularity_list p_relative">
        <div class="list_title">人气漫画</div>
        <div class="item_list over_hidden">
          <a
            :href="`https://manga.bilibili.com/detail/${item.mid}?refer_from=bili_main_nav`"
            target="_blank"
            :title="item.title"
            class="
              list_item
              dp_block
              p_relative
              t_over_hidden t_no_wrap
              border_box
            "
            v-for="(item, index) in popularityList"
            @mouseenter="showPic(item.poster)"
            @mouseleave="hiddenPic"
          >
            <span class="item_index">{{ index + 1 }}</span>
            <span class="item_label">{{ item.title }}</span>
          </a>
          <div
            class="
              float_image
              p_absolute
              bg_cover bg_center bg_no_repeat
              over_hidden
            "
            v-if="imgShow"
          >
            <div
              v-if="img"
              class="w_100 h_100 bg_cover bg_center bg_no_repeat"
              :style="{ backgroundImage: `url(${img})` }"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recommendList: [
        {
          title: "石之海(乔乔的奇妙冒险第6部)",
          mid: "mc25451",
          poster: "/static/brief/manga/1.png",
        },
        {
          title: "鬼灭之刃",
          mid: "mc25717",
          poster: "/static/brief/manga/2.png",
        },
        {
          title: "工作细胞",
          mid: "mc25967",
          poster: "/static/brief/manga/3.png",
        },
        {
          title: "航海王",
          mid: "mc24742",
          poster: "/static/brief/manga/4.png",
        },
      ],
      popularityList: [
        {
          title: "幽冥诡匠",
          mid: "mc26768",
          poster: "/static/ranking/manga/1.png",
        },
        {
          title: "更衣人偶坠入爱河",
          mid: "mc28386",
          poster: "/static/ranking/manga/2.png",
        },
        {
          title: "入间同学入魔了！",
          mid: "mc27189",
          poster: "/static/ranking/manga/3.png",
        },
        {
          title: "间谍过家家",
          mid: "mc28201",
          poster: "/static/ranking/manga/4.png",
        },
        {
          title: "步天歌",
          mid: "mc25501",
          poster: "/static/ranking/manga/5.png",
        },
        {
          title: "碧蓝之海",
          mid: "mc25969",
          poster: "/static/ranking/manga/6.png",
        },
      ],
      img: "",
      imgShow: false,
    };
  },
  methods: {
    showPic(pic) {
      this.img = pic;
      this.imgShow = true;
    },
    hiddenPic() {
      this.img = "";
      this.imgShow = false;
    },
  },
};
</script>

<style lang="scss">
.van_popover.van_popper.van_popper_manga {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  left: -54px;
}
.van_popper_manga {
  width: 720px;
  height: 266px;
}
.box {
  width: 520px;
  height: 260px;
  padding: 20px 0 20px 20px;
  background-color: #fff;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-flow: nowrap;
  .recommendation_list {
    width: 292px;
    margin-right: 20px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    .list_item {
      margin-bottom: 20px;
      text-decoration: none;
      .item_image {
        width: 136px;
        height: 77px;
        border-radius: 2px;
        background-image: url("/static/ranking/manga/default.png");
      }
      .item_title {
        max-width: 136px;
        margin-top: 6px;
        font-size: 13px;
        color: rgba(0, 0, 0, 0.87);
      }
    }
  }
  .divider {
    width: 1px;
    background-color: rgba(0, 0, 0, 0.1);
  }
  .popularity_list {
    .list_title {
      margin-left: 20px;
      font-size: 16px;
      color: #1c1d1f;
    }
    .item_list {
      margin-top: 8px;
      font-size: 13px;
      line-height: 2.6;
      .list_item {
        width: 187px;
        padding: 0 20px;
        text-decoration: none;
        color: #1c1d1f;
        .item_index {
          color: #cf9870;
        }
        .item_label {
          margin-left: 10px;
        }
      }
    }
    .float_image {
      width: 160px;
      height: 213px;
      left: 95%;
      top: 2.5%;
      border-radius: 4px;
      background-image: url("/static/ranking/manga/default.png");
      box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.3);
    }
  }
}
.border_box {
  box-sizing: border-box;
}
.p_relative {
  position: relative;
}
.p_absolute {
  position: absolute;
}
.over_hidden {
  overflow: hidden;
}
.bg_cover {
  background-size: cover;
}
.bg_center {
  background-position: center;
}
.bg_no_repeat {
  background-repeat: no-repeat;
}
.t_over_hidden {
  text-overflow: ellipsis;
  overflow: hidden;
}
.t_no_wrap {
  white-space: nowrap;
}
.h_100 {
  height: 100%;
}
.w_100 {
  width: 100%;
}
.dp_block {
  display: block;
}
</style>